<template>
  <div class="login-bg">
    <div class="login-container">
      <div class="login-card">
        <div style="font-size: 34px; margin-bottom: 60px;color: #fff">多版本语言多页文稿校对检测系统</div>
        <!-- <img src="@/assets/images/login-title.png" alt="logo" class="login-logo" /> -->
        <!-- <h2 style="text-align:center; margin-bottom: 20px;">登录</h2> -->
        <el-form :model="form" @submit.prevent="onLogin" style="width: 70%;">
          <el-form-item>
            <el-input v-model="form.username" placeholder="用户名" :prefix-icon="User" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" type="password" placeholder="密码" :prefix-icon="Lock" show-password />
          </el-form-item>
          <el-form-item>
            <!-- <div class="captcha-container">
              <el-input v-model="form.captcha" placeholder="验证码" style="width: 60%;"  @keydown.enter="onLogin" />
              <div class="captcha-image" @click="refreshCaptcha">
                <img :src="captchaUrl" alt="验证码" />
              </div>
            </div> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="onLogin" @keydown.enter="onLogin">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { login, getYzm } from '@/api/user'

const router = useRouter()
const captchaUrl = ref('')

const form = reactive({
  username: '',
  password: '',
  captcha: '',
  checkKey: '',
})

// 获取验证码
async function refreshCaptcha() {
  try {
    const res = await getYzm()
    if (res.success) {
      // 将ArrayBuffer转换为base64字符串
      // const bytes = new Uint8Array(res.result);
      // const binary = bytes.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
      // const base64 = window.btoa(binary);
      captchaUrl.value = res.result;
    } else {
      ElMessage.error('获取验证码失败')
    }
  } catch (error) {
    console.error('获取验证码失败:', error)
    ElMessage.error('获取验证码失败')
  }
}

// 页面加载时获取验证码
onMounted(() => {
  refreshCaptcha()
})



async function onLogin() {
  if (!form.username || !form.password) {
    ElMessage.error('请输入用户名和密码')
    return
  }
  
  // if (!form.captcha) {
  //   ElMessage.error('请输入验证码')
  //   return
  // }
  
  try {
    // 调用登录API
    const res = await login({
      username: form.username,
      password: form.password,
      captcha: form.captcha,
      checkKey: 1629428467008
    })
  
    // 存储token
    localStorage.setItem('token', res.result.token);
    localStorage.setItem('userInfo', JSON.stringify(res.result.userInfo))
    
    // 重置验证码
    captchaUrl.value = ''
    ElMessage.success(`欢迎，${form.username}！`)
    router.push('/home')
  } catch (error) {
    console.error('登录失败:', error)
    // 错误信息已在request.js的拦截器中处理
  } finally{
    refreshCaptcha()
  }
}
</script>

<style scoped>
.login-logo {
  width: 410px;
  height: 30px;
  margin-bottom: 40px;
}
.login-bg {
  height: 100%;
  width: 100%;
  background-color: #131218;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container {
  width: 1280px;
  height: 675px;
  background: url('@/assets/images/login-bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 594px;
  height: 460px;
  background-color: #2D2F37;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  align-items: center;     /* 水平居中内容 */
}

.captcha-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.captcha-image {
  width: 38%;
  height: 32px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}

.captcha-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.captcha-loading {
  color: #909399;
  font-size: 14px;
}
</style>